<div class="sidebar-flex">
<mat-list>
  <mat-list-item class="workspace-menu">
    <div mat-line class="workspace-menu-line" [matMenuTriggerFor]="workspaceMenu" (click)="setTrigger($event)"
         #workspaceSelectionTrigger="matMenuTrigger">

      <div *ngIf="isLocalWorkspaceSelected" class="workspace-icon-container local">
        <i class="moon-Home"></i>
      </div>
      <div *ngIf="!isLocalWorkspaceSelected" class="workspace-icon-container remote">
        <span class="workspace-name-initial">{{selectedWorkspace.name[0].toUpperCase()}}</span>
      </div>
      <span class="workspace-name">{{selectedWorkspace.name}}</span>
      <i class="moon-Caret-down"></i>

      <mat-menu #workspaceMenu="matMenu" [hasBackdrop]="false" role="menu">
        <span mat-menu-item class="not-displayed">dummy fix for github issue 3352</span>

        <div *ngFor="let workspace of workspacesState" mat-menu-item class="workspace-select-item" (click)="switchToWorkspace(workspace)">
          <div *ngIf="workspace.type === 'local'" class="workspace-icon-container local">
            <i class="moon-Home"></i>
          </div>
          <div *ngIf="workspace.type !== 'local'" class="workspace-icon-container remote">
            <span>{{workspace.name[0].toUpperCase()}}</span>
          </div>
          <div class="workspace-name-container">
            <span>{{workspace.name}}</span>
            <span>{{workspace.description}}</span>
          </div>
          <img class="workspace-menu-icon" *ngIf="workspace.selected" src="assets/images/check.svg" alt="current workspace">
          <img class="workspace-menu-icon" *ngIf="workspace.locked" src="assets/images/lock-key-fill.svg" alt="locked workspace">
        </div>

        <div class="divider"></div>

        <div [disabled]="doesRemoteWorkspaceExist || isLeappTeamStubbed" mat-menu-item
             (click)="doesRemoteWorkspaceExist ? false : loginToRemoteWorkspace()">
          <img class="workspace-menu-icon" src="assets/images/sign-in.svg" alt="sign-in">
          <span>Sign-in Workspace</span>
        </div>

        <div [disabled]="isLeappTeamStubbed" mat-menu-item (click)="showManageWorkspacesDialog()">
          <img class="workspace-menu-icon" src="assets/images/buildings.svg" alt="manage-workspaces">
          <span>Manage Workspaces</span>
        </div>

        <div class="divider"></div>

        <div mat-menu-item (click)="openWorkspaceDocumentation()">
          <img class="workspace-menu-icon" src="assets/images/book-open-text.svg" alt="settings">
          <span>What's a workspace?</span>
        </div>

        <div mat-menu-item (click)="showOptionDialog()">
          <img class="workspace-menu-icon" src="assets/images/gear.svg" alt="settings">
          <span>Settings...</span>
        </div>

        <div [disabled]="!canLockWorkspace || isLeappTeamStubbed" mat-menu-item (click)="logoutFromRemoteWorkspace(true)">
          <img class="workspace-menu-icon" src="assets/images/sign-out.svg" alt="sign-out">
          <span>Lock</span>
        </div>
      </mat-menu>
    </div>
  </mat-list-item>
  <mat-list-item (click)="resetFilters();" class="{{this.showAll ? 'selected-segment' : ''}}">
    <div mat-line><i class="moon-Row"></i> <span>All Sessions</span></div>
  </mat-list-item>
  <mat-list-item (click)="showOnlyPinned();" class="{{this.showPinned ? 'selected-segment' : ''}}">
    <div mat-line><i class="moon-Pin"></i> <span>Pinned</span></div>
  </mat-list-item>
  <div class="space-between-mat-lists"></div>
  <app-integration-bar [isTeamWorkspace]="selectedWorkspace.type === 'team'"></app-integration-bar>
  <div class="space-between-mat-lists"></div>
  <mat-accordion>
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <div mat-subheader><span>Saved segments</span><i class="moon-Caret-down"></i></div>
        </mat-panel-title>
      </mat-expansion-panel-header>

      <mat-list-item [disableRipple]="true" *ngFor="let segment of segments" [ngClass]="selectedSegmentCheck(segment)"
                     (click)="applySegmentFilter(segment, $event);">
        <div mat-line class="visible-option-menu segment-row"><i class="moon-Tag"></i> <span>{{segment.name}}</span><i class="moon-Close"
                                                                                                                       (click)="showConfirmationDialog(segment, $event)"></i>
        </div>
      </mat-list-item>

    </mat-expansion-panel>
  </mat-accordion>
</mat-list>
<!--<div *ngIf="!isLocalWorkspaceSelected">
  <button (click)="exportProWorkspace()">Export PRO workspace <i *ngIf="exporting" class="fa fa-spinner fa-spin"></i></button>
</div>-->
<app-sync-pro-widget></app-sync-pro-widget>
</div>
